
<!DOCTYPE html>
<html>
<head>
    <title>Login</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/css/qq_login.css" rel='stylesheet' type='text/css' />
    <link href='https://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic|Oswald:400,300,700' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Exo+2' rel='stylesheet' type='text/css'>
</head>
<body>
<!--<div class="adcenter">-->
    <div class="login-form">
        <div class="close"> </div>
        <div class="head-info">
            <label class="lbl-1"> </label>
            <label class="lbl-2"> </label>
            <label class="lbl-3"> </label>
        </div>
        <div class="clear"> </div>
        <div class="avtar">
            <img id="qq_img" src="http://q1.qlogo.cn/g?b=qq&nk=10000&s=100" style="border-radius: 50px;" />
        </div>
        <div class="layui-form layuimini-form">
            <input type="text" class="number" name="qq" id="Username" placeholder="请输入QQ号">
            <div class="key">
                <input type="text" name="passwrod" placeholder="请输入密码">
            </div>
        <div class="signin">
            <input type="submit" lay-submit lay-filter="saveBtn" value="安全登录" >
        </div>
    </div>
        </div>
    <script src="/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
    <script>
        var socket_friend,test_i;
        layui.use(['jquery','form','layer'], function () {
            var $ = layui.jquery,
                form = layui.form,
                layer = layui.layer;
            form.on('submit(saveBtn)', function (data) {
                var json = data.field;
                // layer.alert(JSON.stringify(json));
                var socketUrl="ws://"+window.location.host+":37373";
                if(typeof(WebSocket) == "undefined") {
                    alert("你的浏览器不支持websocket，请升级到IE10以上浏览器，或者使用谷歌、火狐、360浏览器。");
                }else{
                    if(socket_friend!=null){
                        socket_friend.close();
                        socket_friend=null;
                    }
                    socket_friend = new WebSocket(socketUrl);
                    //打开事件
                    socket_friend.onopen = function() {
                        console.log("websocket已打开");
                        socket_friend.send("bot"+json.qq);//注册
                        $.ajax({url: '/AddBot',type: 'POST',async: true,cache: false,
                            data: "qq="+json.qq+"&passwrod="+json.passwrod,
                            headers: {"token":localStorage.getItem("token")},
                            beforeSend: function () {
                                test_i=showLoad();
                            },
                            success: function (dt) {
                                closeLoad(test_i);
                                if(dt.msg==="登录成功！"){
                                    localStorage.setItem("bot_qq",json.qq);
                                    $(".layuimini-logo a img").attr("src", "http://q1.qlogo.cn/g?b=qq&nk="+json.qq+"&s=100");
                                }
                                var index = layer.alert(dt.msg, {
                                    title: '提示'
                                }, function () {
                                    layer.close(index);
                                    window.parent.location="/admin";
                                });
                            }
                        })
                    };
                    //获得消息事件
                    socket_friend.onmessage = function(msg) {
                        closeLoad(test_i);//关闭加载
                        console.log(msg.data)
                        console.log(msg)
                        if(msg === "yes"){
                            var index = layer.alert("登录成功！", {
                                title: '提示'
                            }, function () {
                                layer.close(index);
                                window.parent.location="/admin";
                            });
                        }else {
                            layer.open({
                                content: '请手动验证登录', btn: ['已验证', '打开验证']
                                , yes: function (index, layero) {
                                    socket_friend.send("yes");//注册
                                }, btn2: function (index, layero) {
                                    window.open(msg.data);
                                    return false;
                                }, cancel: function () {
                                    return false;
                                }
                            });
                        }
                    };
                    //关闭事件
                    socket_friend.onclose = function() {
                        console.log("websocket已关闭");
                    };
                    //发生了错误事件
                    socket_friend.onerror = function() {
                        console.log("websocket发生了错误");
                    }
                };
                return false;
            });
            function showLoad() {
                return layer.msg('玩命登录中...', {icon: 16,shade: [0.5, '#f5f5f5'],scrollbar: false,offset: 'auto', time:100000});
            }
            function closeLoad(index) {
                layer.close(index);
            }
            $("#Username").bind("input",function () {
                if($(this).val().length >= 5){
                    $('#qq_img').attr("src", "http://q1.qlogo.cn/g?b=qq&nk="+$(this).val()+"&s=100");
                }
            });

            function openSocket(qq) {

            }

        });
    </script>
</body>
</html>